<script setup lang="ts" name="payeeAccount">
import {ref, onMounted, reactive} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
import { useUsersApi } from "/src/api/users";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const alipayAccountFormType = ref(false);
const userBankFormType = ref(false);
const lxsAppData = reactive({
	tab: {
		type: ref(1),
		secondName: ref('')
	},
	ruleForm: {
		payeeType: 1,
		user_alipay: {
			payee_name: '',
			payee_account: ''
		},
		user_bank: {
			bank_name: '',
			bank_info: '',
			payee: '',
			bank_number: ''
		}
	},
	tips: {
		payee_name: '',
		payee_account: '',
		bank_name: '',
		bank_info: '',
		payee: '',
		bank_number: '',
	},
	userInfo: {},
	platformData: [
		{name: '我的信息', path: '/mine'},
		{name: '收款账号', path: '/mine/payee_account'},
		{name: '注销账户', path: '/mine/cancel_account'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 账户类型点击
const payeeTypeClick = (index) => {
	lxsAppData.ruleForm.payeeType = index;
}

// 支付宝更换绑定
const alipayAccountChange = () => {
	alipayAccountFormType.value = false;
}

// 银行卡更换绑定
const userBankChange = () => {
	userBankFormType.value = false;
}

// 重置提交
const onCancel = () => {
	if (lxsAppData.ruleForm.payeeType == 1) {
		lxsAppData.ruleForm.user_alipay = {
			payee_name: '',
			payee_account: ''
		}
	} else if (lxsAppData.ruleForm.payeeType == 2) {
		lxsAppData.ruleForm.user_bank = {
			bank_name: '',
			bank_info: '',
			payee: '',
			bank_number: ''
		}
	}
}

// input 输入
const payeeNameInput = (value) => {
	if (value.length == 0) {
		lxsAppData.tips.payee_name = '请输入收款名称';
	} else {
		lxsAppData.tips.payee_name = '';
	}
}
const payeeAccountInput = (value) => {
	if (value.length == 0) {
		lxsAppData.tips.payee_account = '请输入收款账号';
	} else {
		lxsAppData.tips.payee_account = '';
	}
}
const bankNameInput = (value) => {
	if (value.length == 0) {
		lxsAppData.tips.bank_name = '请输入开户支行';
	} else {
		lxsAppData.tips.bank_name = '';
	}
}
const bankInfoInput = (value) => {
	if (value.length == 0) {
		lxsAppData.tips.bank_info = '请输入开户行信息';
	} else {
		lxsAppData.tips.bank_info = '';
	}
}
const payeeInput = (value) => {
	if (value.length == 0) {
		lxsAppData.tips.payee = '请输入收款人姓名';
	} else {
		lxsAppData.tips.payee = '';
	}
}
const bankNumberInput = (value) => {
	const reg = /^.{16,19}$/;
	if (reg.test(value) == false) {
		lxsAppData.tips.bank_number = '银行卡号格式不正确';
	} else {
		lxsAppData.tips.bank_number = '';
	}
}

// 表单提交
const onSubmit = async () => {

	if (!lxsAppData.userInfo.user_authentication) {
		return ElMessageBox.confirm('在填写收款信息之前，为了保障您的合法权益和资金安全，请先完成实名认证。', '实名认证', {
			showCancelButton: false,
			confirmButtonText: '去认证',
			confirmButtonClass: 'el-button--orange',
			center: true,
		}).then(() => {
			router.push({
				path: '/mine'
			})
		}).catch(() => {
			console.log('取消实名认证');
		});
	}

	if (lxsAppData.ruleForm.payeeType === 1) {
		if (lxsAppData.ruleForm.user_alipay.payee_name === '') {
			lxsAppData.tips.payee_name = '请输入收款名称';
			return false;
		} else {
			lxsAppData.tips.payee_name = '';
		}
		if (lxsAppData.ruleForm.user_alipay.payee_account === '') {
			lxsAppData.tips.payee_account = '请输入收款账号';
			return false;
		} else {
			lxsAppData.tips.payee_account = '';
		}
	} else if (lxsAppData.ruleForm.payeeType === 2) {
		if (lxsAppData.ruleForm.user_bank.bank_name === '') {
			lxsAppData.tips.bank_name = '请输入开户支行';
			return false;
		} else {
			lxsAppData.tips.bank_name = '';
		}
		if (lxsAppData.ruleForm.user_bank.bank_info === '') {
			lxsAppData.tips.bank_info = '请输入开户行信息';
			return false;
		} else {
			lxsAppData.tips.bank_info = '';
		}
		if (lxsAppData.ruleForm.user_bank.payee === '') {
			lxsAppData.tips.payee = '请输入收款人姓名';
			return false;
		} else {
			lxsAppData.tips.payee = '';
		}
		if (/^.{16,19}$/.test(lxsAppData.ruleForm.user_bank.bank_number) == false) {
			lxsAppData.tips.bank_number = '银行卡号格式不正确';
			return false;
		} else {
			lxsAppData.tips.bank_number = '';
		}
	}

	const res = await useUsersApi().paymentAccountSubmit(lxsAppData.ruleForm);

	if (res.code === 200) {
		if (lxsAppData.ruleForm.payeeType === 1) {
			alipayAccountFormType.value = true;
		} else if (lxsAppData.ruleForm.payeeType == 2) {
			userBankFormType.value = true;
		}
		ElMessage({
			message: res.message,
			type: 'success'
		})
	} else {
		ElMessage({
			message: res.message,
			type: 'error'
		})
	}
}

// 获取页面数据
const getPageData = async () => {
	const res = await useUsersApi().getAccountNumberData({});
	lxsAppData.userInfo = res.data.user_info;
	if (lxsAppData.userInfo.user_alipay) {
		alipayAccountFormType.value = true;
		lxsAppData.ruleForm.user_alipay = lxsAppData.userInfo.user_alipay;
	}
	if (lxsAppData.userInfo.user_bank) {
		userBankFormType.value = true;
		lxsAppData.ruleForm.user_bank = lxsAppData.userInfo.user_bank;
	}
	console.log('获取财务提现页面数据', lxsAppData.userInfo);
}

onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader :second-name="lxsAppData.tab.secondName"/>

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto">

					<div class="simple3">
						<div class="simple-header">
							<text @click="payeeTypeClick(1)" :class="lxsAppData.ruleForm.payeeType === 1 ? 'simple-header-active' : ''">支付宝</text>
							<text @click="payeeTypeClick(2)" :class="lxsAppData.ruleForm.payeeType === 2 ? 'simple-header-active' : ''">银行卡</text>
						</div>
						<div class="simple-main">
							<el-form :model="lxsAppData.ruleForm" label-width="auto" style="max-width: 452px">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="lxsAppData.ruleForm.payeeType === 1">
									<el-form-item label="收款名称">
										<el-input :readonly="alipayAccountFormType ? true: false" @input="payeeNameInput" v-model="lxsAppData.ruleForm.user_alipay.payee_name" placeholder="请输入收款名称" />
										<div class="form-tips" v-if="lxsAppData.tips.payee_name != ''">
											{{ lxsAppData.tips.payee_name }}</div>
									</el-form-item>
									<el-form-item label="收款账号">
										<el-input :readonly="alipayAccountFormType ? true: false" @input="payeeAccountInput" v-model="lxsAppData.ruleForm.user_alipay.payee_account" placeholder="请输入收款账号" />
										<div class="form-tips" v-if="lxsAppData.tips.payee_account != ''">
											{{ lxsAppData.tips.payee_account }}</div>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="lxsAppData.ruleForm.payeeType === 2">
									<el-form-item label="银行名称">
										<el-input v-model="lxsAppData.ruleForm.user_bank.bank_name" @input="bankNameInput" :readonly="userBankFormType ? true: false" placeholder="请输入银行名称，例如：中国工商银行花城支行" />
										<div class="form-tips" v-if="lxsAppData.tips.bank_name != ''">
											{{ lxsAppData.tips.bank_name }}</div>
									</el-form-item>
									<el-form-item label="开户支行">
										<el-input v-model="lxsAppData.ruleForm.user_bank.bank_info" @input="bankInfoInput" :readonly="userBankFormType ? true: false" placeholder="请输入开户支行" />
										<div class="form-tips" v-if="lxsAppData.tips.bank_info != ''">
											{{ lxsAppData.tips.bank_info }}</div>
									</el-form-item>
									<el-form-item label="收款名称">
										<el-input v-model="lxsAppData.ruleForm.user_bank.payee" @input="payeeInput" :readonly="userBankFormType ? true: false" placeholder="请输入收款名称" />
										<div class="form-tips" v-if="lxsAppData.tips.payee != ''">
											{{ lxsAppData.tips.payee }}</div>
									</el-form-item>
									<el-form-item label="收款账号">
										<el-input v-model="lxsAppData.ruleForm.user_bank.bank_number" @input="bankNumberInput" :readonly="userBankFormType ? true: false" placeholder="请输入收款账户" />
										<div class="form-tips" v-if="lxsAppData.tips.bank_number != ''">
											{{ lxsAppData.tips.bank_number }}</div>
									</el-form-item>
								</el-col>

								<template v-if="lxsAppData.ruleForm.payeeType === 1">
									<div class="simple-main-footer" v-if="!alipayAccountFormType">
										<el-button class="submit-btn" @click="onSubmit" size="default">点击提交</el-button>
										<el-button class="cancel-btn" @click="onCancel" size="default">重置信息</el-button>
									</div>
									<div class="simple-main-footer" v-else>
										<text class="color-orange" @click="alipayAccountChange">更换绑定</text>
									</div>
								</template>
								<template v-if="lxsAppData.ruleForm.payeeType === 2">
									<div class="simple-main-footer" v-if="!userBankFormType">
										<el-button class="submit-btn" @click="onSubmit" size="default">点击提交</el-button>
										<el-button class="cancel-btn" @click="onCancel" size="default">重置信息</el-button>
									</div>
									<div class="simple-main-footer" v-else>
										<text class="color-orange" @click="userBankChange">更换绑定</text>
									</div>
								</template>
							</el-form>
						</div>
					</div>

				</el-card>

			</div>

		</div>

	</div>
</template>

<style lang="scss">
@media screen and (max-width: 620px) {
	.simple3 .simple-header {
		justify-content: center !important;
		font-size: 12px !important;
	}
	.simple3 .simple-header text {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

.el-form {
	margin: auto;
}
.el-form-item__label-wrap {
	margin-left: 0 !important;
}
.el-form-item__label {
	font-size: 14px;
	color: #000000;
}
.el-input {
	width: 329px;
	background: #F2F4F7;
}
.el-input__wrapper {
	background: #F2F4F7;
}
.submit-btn {
	color: #FFFFFF;
	background: #FC661C;
	border-radius: 5px 5px 5px 5px;
	border: none !important;
}
.cancel-btn {
	color: #FC661C;
	background: rgba(252,102,28,0.12);
	border-radius: 5px 5px 5px 5px;
	border: none !important;
}

.layout-padding-auto {
	min-height: 80vh;
}

.simple3 {
	max-width: 612px;
	margin: 30px auto;

	.simple-header {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #F8F5F3;
		border-radius: 0px 0px 0px 0px;
		border: 1px solid #ECECEC;

		text {
			width: 150px;
			height: 52px;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: transform 0.3s;
		}

		text:nth-child(1) {
			margin-left: 100px;
		}
		text:nth-child(2) {
			margin-right: 100px;
		}

		.simple-header-active {
			color: #FC661C;
			border-bottom: 3px solid #FC661C;
		}
	}

	.simple-main {
		width: 100%;
		border: 1px solid #ECECEC;
		padding: 30px;

		.el-form {
			.simple-main-footer {
				max-width: 300px;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-items: center;

				text {
					font-size: 14px;
					cursor: pointer;
				}
			}

			.form-tips {
				display: inline-block;
				font-size: 12px;
				color: #D8232A;
				position: relative;
				margin-left: 18px;
			}
			.form-tips::before {
				content: url("https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E6%8F%90%E7%A4%BA.png");
				width: 16px;
				height: 16px;
				position: absolute;
				left: -18px;
				top: 10%;
				padding-right: 5px;
			}
		}
	}
}
</style>